<template>
	<view class="container">
		<!-- <view class="fixbg" style="background-image:url(../../static/bg.png)"></view> -->
		<musichead title="搜索歌曲" :icon="true" :iconblack="true"></musichead>
		<view class="search-input">
			<text class="iconfont icon-fangdajing"></text>
			<input type="text" v-model="searchText" placeholder="搜索歌曲" @confirm="handleToSearch" />
			<text class="iconfont icon-caozuo-guanbi" v-if="searchText != ''" @tap="handleClearInput"></text>
		</view>
		<scroll-view scroll-y="true" class="search-scroll-wrapped">
			<block v-if="searchType == 1">
				<view class="block-1">
					<view class="search-history-head">
						<text class="search-history-title">历史记录</text>
						<text class="iconfont icon-lajitong" @tap="handleToClearHistory"></text>
					</view>
					<view class="search-results-wrapped">
						<text v-for="(item, index) of searchHistory" :key="index"
							@tap="handleToHotSearch(item)">{{ item }}</text>
					</view>
					<view class="search-hot-wrapped">
						<view class="search-hot-title">
							<text>热搜榜</text>
						</view>
						<view class="search-hot-item" v-for="(item, index) of searchHotData" :key="index"
							@tap="handleToHotSearch(item.searchWord)">
							<view class="hot-number" :class="{'hot-red': index+1 < 4}">{{index + 1}}</view>
							<view class="hot-item-content">
								<view class="hot-title">
									{{item.searchWord}}
									<image :src="item.iconUrl" mode="aspectFit"></image>
								</view>
								<view class="hot-content">
									{{item.content}}
								</view>
							</view>
							<view class="hot-like">{{item.score}}</view>
						</view>

						<!-- <view class="search-hot-item">
						<view class="hot-number">1</view>
						<view class="hot-item-content">
							<view class="hot-title">
								少年
								<image src="/static/dujia.png" mode="aspectFit"></image>
							</view>
							<view class="hot-content">
								"少年"这个词太美好了
							</view>
						</view>
						<view class="hot-like">2968664</view>
					</view>
					<view class="search-hot-item">
						<view class="hot-number">1</view>
						<view class="hot-item-content">
							<view class="hot-title">
								少年
								<image src="/static/dujia.png" mode="aspectFit"></image>
							</view>
							<view class="hot-content">
								"少年"这个词太美好了
							</view>
						</view>
						<view class="hot-like">2968664</view>
					</view> -->
					</view>
				</view>

			</block>
			<block v-else-if="searchType == 2">
				<view class="input-search-result">
					<view class="input-search-result-item" v-for="(item, index) of searchResultList">
						<view class="result-word">
							<view>
								{{item.name}}
							</view>
							<view>
								{{item.artists[0].name + ' ' + (item.artists[1]? `,` + item.artists[1].name : '')}} - {{item.album.name}}
							</view>
						</view>
						<view class="play-icon">
							<text class="iconfont icon-bofang"></text>
						</view>
					</view>
					
					<!-- <view class="input-search-result-item">
						<view class="result-word">
							<view>
								少年
							</view>
							<view>
								许巍 - 爱如少年
							</view>
						</view>
						<view class="play-icon">
							<text class="iconfont icon-bofang"></text>
						</view>
					</view> -->
					
					
				</view>
				
			</block>
		</scroll-view>
	</view>
</template>

<script>
	import musichead from '@/components/musichead/musichead.vue'
	import {
		searchHot,
		searchSuggest,
		searchWord
	} from '@/common/api.js'
	export default {
		data() {
			return {
				searchText: '',
				searchHotData: [],
				searchHistory: [],
				searchType: 1,
				searchResultList: [
					{
						name: '',
						artists: [
							{
								name: ''
							}
						],
						album: {
							name:''
						}
					}
				],
			}
		},
		components: {
			musichead
		},
		methods: {
			handleClearInput() {
				this.searchText = '';
				if(this.searchType == 2){
					this.searchType = 1;
				}
			},
			getSearchHot() {
				searchHot().then(res => {
					// console.log(res);
					if (res.data.code == 200) {
						this.searchHotData = res.data.data
					}
				})
			},
			handleToHotSearch(hotSearchWord) {
				this.searchText = hotSearchWord;
				this.handleToSearch();
			},
			handleToSearch() {
				if (this.searchText.trim() == '') {
					return
				}
				this.initSearchHistory();
				// 将新的搜索关键词插入到数组的第一个
				this.searchHistory.unshift(this.searchText)
				// 去重  es6
				this.searchHistory = [...new Set(this.searchHistory)]
				// 限制长度，历史记录的个数
				if (this.searchHistory.length > 12) {
					this.searchHistory.length = 12;
				}
				uni.setStorage({
					key: 'searchHistory',
					data: this.searchHistory
				});
				this.getSearchList();
			},
			initSearchHistory() {
				uni.getStorage({
					key: 'searchHistory',
					success: res => { // 成功表示从localstorage中获取到历史记录数据
						this.searchHistory = res.data;
					},
					fail: res => { // 失败表示本地localstorage中没有历史记录数据
						uni.setStorage({
							key: 'searchHistory',
							data: this.searchHistory
						})
					}
				})
			},

			handleToClearHistory() {
				uni.removeStorage({
					key: 'searchHistory',
					success: res => {
						this.searchHistory = []
					}
				})
			},
			
			getSearchList(){
				searchWord(this.searchText).then(res => {
					if(res.data.code == '200'){
						this.searchResultList = res.data.result.songs
					}
					this.searchType = 2
					console.log(this.searchResultList);
				})
			}
		},


		onLoad() {
			this.getSearchHot();
			this.initSearchHistory();
		}
	}
</script>

<style scoped>
	.search-wrapped {
		width: 100vw;
	}

	.search-input {
		width: 90%;
		height: 70rpx;
		margin: 40rpx 30rpx 30rpx 30rpx;
		display: flex;
		justify-content: flex-start;
		background-color: #f7f7f7;
		align-items: center;
		border-radius: 35rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.search-input input {
		flex: 1;
		color: #666;
		margin-left: 26rpx;
		font-size: 28rpx;
	}

	.search-input text:nth-child(1) {
		color: #666;
		font-size: 26rpx;
		margin-left: 26rpx;
	}

	.search-input text:nth-child(3) {
		color: #666;
		font-size: 26rpx;
		margin-right: 26rpx;
	}

	.search-scroll-wrapped {
		width: 100vw;

	}

	.block-1 {
		width: 90%;
		margin: 40rpx auto 0 auto;
	}

	/* 历史记录  */
	.search-history-head {
		display: flex;
		justify-content: space-between;
	}

	.search-history-head text:nth-child(1) {
		color: #666;
		font-size: 26rpx;
	}

	.search-history-head text:nth-child(2) {
		color: #ccc;
		font-size: 40rpx;
	}

	.search-results-wrapped {
		margin-top: 16rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		font-size: 26rpx;
	}

	.search-results-wrapped text {
		padding: 10rpx;
		background-color: #efefef;
		font-size: 20rpx;
		color: #666;
		border-radius: 20rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	/* 热搜榜 */
	.search-hot-wrapped {
		margin-top: 60rpx;
		font-size: 26rpx;
	}

	.search-hot-title {
		color: #666;
		margin-bottom: 36rpx;
	}

	.search-hot-item {
		/* width: 100%; */
		display: flex;
		align-items: center;
		margin-bottom: 58rpx;
	}

	.hot-number {
		/* font-size: 40rpx; */
		width: 60rpx;
		/* color: #fb2222;*/
		color: #666;
		margin-left: 8rpx;
	}

	.hot-item-content {
		flex: 1;
	}

	.hot-title {
		font-size: 30rpx;
	}

	.hot-title image {
		width: 48rpx;
		height: 22rpx;
	}

	.hot-content {
		font-size: 24rpx;
		color: #b7b7b7;
	}

	.hot-like {
		color: #b4b4b4;
	}

	.hot-red {
		color: #fb2222
	}

	/* 搜索结果列表 */
	.input-search-result {
		width: 100vw;
		border-top: #e4e4e4 2rpx solid;
		padding: 30rpx;
	}

	.input-search-result-item {
		width: 90%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 30rpx;
		margin-bottom: 30rpx;
		border-bottom: 2rpx solid #e4e4e4;
	}
/* 	.input-search-result:last-child{
		margin-bottom: 0;
		padding-bottom: 0;
	} */

	.result-word {
		/* flex:1; */
		width: 80%;
	}

	.result-word view:nth-child(1) {
		color: #235790;
		font-size: 28rpx;
		margin-bottom: 12rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.result-word view:nth-child(2) {
		font-size: 22rpx;
		color: #898989;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.play-icon text{
		font-size: 50rpx;
		width: 50rpx;
		height: 50rpx;
		color: #898989;
	}
</style>